<template>
    <center>
        <Card dis-hover style="margin-left: 10%; margin-right: 10%">
            <img src="http://p0.qhimg.com/bdr/__85/t01e0e31bb2877f3a63.jpg" class="demo">
            <div class="vcenter"><h3 :style="isMO?'font-size: xx-large':''">关 于 本 站</h3></div>
        </Card>
        <mavon-editor
                style="z-index: 1; margin-left: 10%; margin-right: 10%"
                v-model="data"
                :subfield="false"
                :defaultOpen="'preview'"
                :toolbarsFlag="false"
                :editable="false"
                :scrollStyle="true"
                :ishljs="true"
                ref="md"/>
    </center>
</template>

<script>
    export default {
        name: "About",
        data(){
            return{
                isMO: navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i),
                data:
                    '### 站主\n' +
                    '- 刘湘兰: 语文教师 就职于广东省 深受学生喜爱 :)\n' +
                    '### 关于开发者\n' +
                    '- [Abalone](https://abalone.life): 湘兰的2018届26班学生 后端开发 男性\n' +
                    '- [Daman](https://damanyang.cn): 湘兰的2018届26班学生 前端开发 男性\n' +
                    '\n' +
                    '---\n' +
                    '\n' +
                    '### 相关技术\n' +
                    '>  后端: Spring+MyBatis+MySQL 8\n' +
                    '>  前端: Vue.js+iView\n' +
                    '>  开发工具: IntelliJ IDEA'
            }
        }
    }
</script>

<style scoped>
    .vcenter {
        font-size: 60px;
        position: absolute;
        left: 1%;
        right: 1%;
        top: 40%;
        color: white;
        transform: translateX(-50%);
        transform: translateY(-50%)
    }

    .demo {
        filter: brightness(50%);
        width: 100%;
    }
</style>